﻿@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h3 class="text-center">系统登录</h3>
    @*<table style="width: 65%">
        <tbody>
            <tr>
                <th class="col-sm-1">用户名：</th>
                <td  class="col-sm-2">
                    <input type="text" name="userName" id="userName" value="" />
                </td>
                <td class="col-sm-2"></td>
                <td rowspan="3" class="col-sm-7">
                    <div id="qrcode"></div>
                    <span id="qrtxt">使用手机扫码登录</span>
                </td>
            </tr>
            <tr>
                <th>密码：</th>
                <td>
                    <input type="password" name="pwd" id="pwd" value="" />
                </td>
                <td></td>
            </tr>
        <tr>
            <th>验证码：</th>
            <td>
                <input type="password" name="checkCode" id="checkCode" value="" />
            </td>
            <td></td>
        </tr>
        <tr>
            <td colspan="2">
                <button class="btn-primary col-4">登录</button>
            </td>
            <td colspan="2"></td>
        </tr>
        </tbody>
    </table>*@
    <div id="qrcode"></div>
    <div id="qrcodeimg" class="text-center" style="display: none">
        <img id="myphoto" onerror="javascript:this.src='/imgs/timg.jpg';" alt="头像" width="250" height="250"/>
    </div>
    <div id="qrtxt" class="text-center">使用手机扫码登录</div>
    <div id="qrcoded">
        
    </div>
    <div id="userName"class="text-center"></div>
    <div  id="account"class="text-center"></div>
    <div  id="pwd"class="text-center"></div>
</div>
@*<img src="@Url.Action("QrCodeImg")" alt="二维码"/>*@
@section Scripts
{
    <script src="~/lib/jquery.qrcode/jquery.qrcode.min.js"></script>
    <script src="~/lib/aspnet-signalr/signalr.min.js"></script>
    <script type="text/javascript">
        //连接
        var connection = new signalR.HubConnectionBuilder().withUrl("/infohub").build();
        //接收 唯一码
        connection.on('GetClientId',
            function (re) {
                if (Array.isArray(re)) {
                    re = re[0];
                }
                console.log(re)
                sessionStorage.setItem('cid', re.cid);
                $("#qrcoded").text(re.cid) 
                // sessionStorage.setItem('token', re);
                //sessionStorage.getItem('token');
                $("#qrcode").html('');
                $("#qrcode").qrcode({
                    render: "canvas", //也可以替换为table
                    width: 150,
                    height: 150,
                    text: re.newCode
                })
            });
        //扫码成功
        connection.on('ScanSuccess',
            function(re) {
                console.log(re)
                $("#qrcode").css('display', 'none');
                $("#qrcodeimg").css('display', '');
                if (Array.isArray(re)) {
                    re = re[0];
                    $("#myphoto").attr('src',re)
                }
                $("#qrtxt").text('扫码成功，等待确认')
                $("#userName").text('')
                $("#account").text('')
                $("#pwd").text('')
            });
        //登录成功
        connection.on('LoginSuccess',
            function(re) {
                console.log(re)
                if (Array.isArray(re)) {
                    re = re[0];
                    //$("#userName").val(re.user)
                    //$("#pwd").val(re.pwd) 
                    $("#userName").text('登录人：'+re.username)
                    $("#account").text('登录账号：'+re.user)
                    $("#pwd").text('登录密码：'+re.pwd)
                }
                $("#qrtxt").text('登录成功')
                $("#qrcoded").hide()
            });
        //打开连接
        connection.start().catch(function(res) {
            alert('连接异常');
            console.log(res);
        })
        //$(function() {
        //    //$("#qrcode").qrcode("https://www.baidu.com")
        //    $("#qrcode").qrcode({
        //        render: "table", //也可以替换为table
        //        width: 150,
        //        height: 150,
        //        text: "https://www.baidu.com"
        //    })
        //})
        //3分钟自动换唯一码
        setInterval(function() {
            console.log('3分钟到了');
            var cid = sessionStorage.getItem('cid');
            //异步请求
            $.ajax({
                type: 'get',
                url: '@Url.Action("NewMessage")',
                data: {cid:cid},
                cache: false,
                dataType: 'json',
                beforeSend: function () {},
                success: function (data) {
                    console.log(data)
                },
                complete: function () {},
                error: function (e) {}
            });
            //非异步请求
            //connection.invoke('RequestNewCode', cid);
        },180000)
    </script>
}
